<template>
  <div class="center-right">
    <div class="topSearch">
      <input v-model="searchName" type="text" placeholder="please enter">
      <div class="searchBtn" @click="search">
        <img src="@/assets/loginImgs/search.png" alt="">
      </div>
    </div>
    <div class="up">
      <div class="up-content">
        <div class="up-header">
          <span>
            The couple must read
          </span>
          <span class="more" @click="getMore('must')">
            more >>
          </span>
        </div>
        <div class="up-footer">
          <div v-if="!mustList.length && !loading" class="nodata">
            <img
              style="width: 30%;"
              src="@/assets/loginImgs/nodata.png"
              alt=""
            >
          </div>
          <ul>
            <li v-for="item in mustList" :key="item.id">
              <span @click="goCategoryDetial(item.id, item.title)">{{
                item.title
              }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="up-content">
        <div class="up-header">
          <span>Hot</span>
          <span class="more" @click="getMore('hot')">
            more >>
          </span>
        </div>
        <div class="up-footer">
          <div v-if="!hotList.length && !loading" class="nodata">
            <img
              style="width: 30%;"
              src="@/assets/loginImgs/nodata.png"
              alt=""
            >
          </div>
          <ul>
            <li v-for="item in hotList" :key="item.id">
              <span @click="goCategoryDetial(item.id, item.title)">{{
                item.title
              }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="up">
      <div class="up-content up-content2">
        <div class="up-header">
          <span>The latest</span>
          <span class="more" @click="getMore('latest')">
            more >>
          </span>
        </div>
        <div class="up-footer">
          <div v-if="!latestList.length && !loading" class="nodata">
            <img
              style="width: 30%;"
              src="@/assets/loginImgs/nodata.png"
              alt=""
            >
          </div>
          <ul>
            <li v-for="item in latestList" :key="item.id">
              <span @click="goCategoryDetial(item.id, item.title)">{{
                item.title
              }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="up-content up-content2">
        <div class="up-header">
          <span>Recommended</span>
          <span class="more" @click="getMore('recommend')">
            more >>
          </span>
        </div>
        <div class="up-footer">
          <div v-if="!recommendList.length && !loading" class="nodata">
            <img
              style="width: 130px;"
              src="@/assets/loginImgs/nodata.png"
              alt=""
            >
          </div>
          <ul>
            <li v-for="item in recommendList" :key="item.id">
              <span @click="goCategoryDetial(item.id, item.title)">{{
                item.title
              }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  articleTextTutorialRecommend,
  articleTextTutorialHot,
  articleTextTutorialMust,
  articleTextTutorialLatest
} from '@/api/article';
export default {
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isShow: false,
      threeMenuShow: false,
      tableData: [],
      categoryList: [],
      hotList: [],
      mustList: [],
      recommendList: [],
      latestList: [],
      searchName: '',
      loading: true
    };
  },
  mounted() {
    this.getHot();
    // this.getLatest();
    // this.getRecommend();
    // this.getMust();
    this.$nextTick(function() {
      if (
        document.documentElement.clientHeight >
        document.getElementsByClassName('content')[0].clientHeight
      ) {
        document.getElementsByClassName('content')[0].style.minHeight =
          document.documentElement.clientHeight -
          document.getElementsByClassName('header')[0].clientHeight -
          document.getElementsByClassName('footer')[0].clientHeight +
          'px';
      } else {
        document.getElementsByClassName('content')[0].style.minHeight =
          950 + 'px';
      }
    });
  },
  methods: {
    search() {
      this.$emit('category', { id: -1, searchName: this.searchName, name: 'home' });
    },
    getMore(type) {
      this.$emit('category', { id: -2, more: type, name: this.title });
    },
    goCategoryDetial(id, title) {
      this.$emit('category', { id: id, name: title, type: 'detial' });
    },
    nextMenu() {
      this.isShow = !this.isShow;
    },
    threeMenu() {
      this.threeMenuShow = !this.threeMenuShow;
    },
    getHot() {
      this.loading = true;
      articleTextTutorialHot().then((res) => {
        this.hotList = res.data.data;
        this.getLatest();
      });
    },
    getLatest() {
      articleTextTutorialLatest().then((res) => {
        this.latestList = res.data.data;
        this.getRecommend();
      });
    },
    getRecommend() {
      articleTextTutorialRecommend().then((res) => {
        this.recommendList = res.data.data;
        this.getMust();
      });
    },
    getMust() {
      articleTextTutorialMust().then((res) => {
        this.mustList = res.data.data;
        this.loading = false;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.nodata {
  text-align: center;
  margin-top: 20px;
  margin-left: -20px;
}
p,
span {
  word-wrap: break-word;
}
.content {
  width: 100%;
  height: 100%;
  margin-top: 70px;
  padding-bottom: 30px;
  background: #f9f9f9;
}
.topSearch {
  height: 46px;
  text-align: center;
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
  input {
    width: 930px;
    height: 46px;
    padding: 0 40px;
    line-height: 46px;
    // margin: 10px 0;
    font-size: 18px;
    outline: none;
    color: #666666;
    background: rgba(255, 255, 255, 1);
    border: 1px solid #e6e6e6;
  }
  .searchBtn {
    position: absolute;
    top: 10px;
    left: 10px;
    img {
      width: 20px;
      height: 20px;
      margin-top: 5px;
    }
  }
}
.center {
  // width: calc(100vw / 1.12);
  margin: 0 auto;
  &-right {
    width: 930px;
    display: inline-block;
    .up {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
      &-content {
        min-height: 250px;
        border: 1px solid lightgray;
        background: #ffffff;
      }
      &-content2 {
        min-height: 250px;
        border: 1px solid lightgray;
        background: #ffffff;
      }
      &-header {
        width: 450px;
        height: 36px;
        font-size: 16px;
        color: #333333;
        line-height: 36px;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        background: rgba(249, 249, 249, 1);
        border-bottom: 1px solid rgba(211, 211, 211, 1);
        opacity: 1;
        .more {
          color: #26c375;
          cursor: pointer;
        }
      }
      &-footer {
        width: 450px;
        font-size: 14px;
        color: rgba(2, 161, 82, 1);
        padding: 20px;
        padding-left: 40px;
        ul {
          margin: 0;
          padding: 0;
          li {
            line-height: 24px;
            span {
              cursor: pointer;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              display: block;
            }
          }
        }
      }
    }
  }
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409eff;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
}
</style>
